<template>
	<view class="relative full-screen uni-bg-white" @click="clickOutside">
		<view class="bg-primary" style="z-index:0;top:0;height:231px;">
			<image class="w-full" mode="widthFix" src="https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-withdraw.png"></image>
		</view>
		<z-paging>
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16"><text class="text-white">补贴账户</text></view>
				</uni-nav-bar>
			</template>
			<view>
				<view class="flex justify-between item-center mx-16 pt-12 pb-16">
					<view class="text-white">
						<view class="font-bold">
							<text class="fs-16">¥</text>
							<text class="fs-32">{{numberFormat(subsidyStore.subsidyAmt)}}</text>
						</view>
						<view class="inline-flex item-center fs-12 mt-4">补贴金金额
							<tooltip :show="showTooltipType===1" placement="bottom" title="补贴金额" content="冻结金额+可用余额">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/icon-tip.png" @click.stop="showTooltip(1)"></image>
							</tooltip>
						</view>
					</view>
				</view>
				<view class="flex justify-between item-center mx-16 pb-12 text-white">
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(subsidyStore.waitRechargeAmt)}}</view>
						<view class="inline-flex item-center fs-12 leading-17">待充值
							<tooltip :show="showTooltipType===2" placement="bottom-left" title="待充值" content="已结算待打款的补贴金额-补贴账户余额">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/icon-tip.png" @click.stop="showTooltip(2)"></image>
							</tooltip>
						</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(subsidyStore.monthWaitSettleAmt)}}</view>
						<view class="inline-flex item-center fs-12 leading-17">本月待结算
							<tooltip :show="showTooltipType===3" placement="bottom" title="本月待结算" content="本月已核销订单，需要补贴给商户的金额">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/icon-tip.png" @click.stop="showTooltip(3)"></image>
							</tooltip>
						</view>
					</view>
					<view class="w-1 h-9 bg-white"></view>
					<view class="flex-col">
						<view class="fs-14 leading-20">{{numberFormat(subsidyStore.lastMonthSettleAmt)}}</view>
						<view class="inline-flex item-center fs-12 leading-17">上月结算
							<tooltip :show="showTooltipType===4" placement="bottom-right" title="上月结算" content="上个自然月实际结算打款给商户的补贴金额">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/icon-tip.png" @click.stop="showTooltip(4)"></image>
							</tooltip>
						</view>
					</view>
				</view>
			</view>
			<view class="px-16 py-12 bg-default">
				<view class="text-color-regular fs-12">补贴金仅支持公对公打款，充值请复制下列地址，前往PC端登录商家后台进行操作。</view>
				<view class="mt-4 radius-4 px-8 leading-22 flex" style="background-color:#FFE9B7;">
					<view class="flex-1 w-0 text-color-hint text-cut mr-4">{{bankPayUrl}}</view>
					<view class="inline-flex item-center flex-shrink" @click="doCopy(bankPayUrl)">
						<image class="size-12 mr-4" src="@/pagesB/static/icon-copy.png"></image>
						<text class="fs-10 color-secondary-info">复制</text>
					</view>
				</view>
			</view>
			<view class="bg-white">
				<view class="pl-20 pr-14 py-20 leading-20 flex justify-between" @click="toFundDetail">
					<text class="text-color-regular fs-14 font-normal">资金明细</text>
					<image class="w-6 h-11" src="@/static/svg/arrow-stroke.svg"></image>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup name="SubsidyInfo">
	import { onMounted, ref } from 'vue'
	import { useSubsidyStore } from '@/stores/modules/subsidy.js'
	import { numberFormat } from '@/utils/index.js'
	import { getBankPayUrlApi } from '@/api/common.js'
	
	const subsidyStore = useSubsidyStore()

	const goBack = () => uni.navigateBack()
	
	const toFundDetail = () => {
		uni.navigateTo({
			url: '/pagesG/subsidy/fund-detail'
		})
	}
	
	const showTooltipType = ref(0)
	const clickOutside = () => {
		showTooltipType.value = 0
	}
	
	const showTooltip = (type) => {
		if (type === 1) {
			showTooltipType.value = 1
		} else if (type === 2) {
			showTooltipType.value = 2
		} else if (type === 3) {
			showTooltipType.value = 3
		} else if (type === 4) {
			showTooltipType.value = 4
		}
	}
	
	// 获取网银支付地址
	const bankPayUrl = ref('')
	const getBankPayUrl = () => {
		getBankPayUrlApi().then(res => {
			bankPayUrl.value = res
		})
	}
	
	const doCopy = (text) => {
		uni.setClipboardData({
			data: text,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				})
			}
		})
	}
	
	onMounted(() => {
		getBankPayUrl()
		subsidyStore.getInfo()
	})
</script>
